import { lazy, Suspense } from "react";
import { Routes, Route, Navigate } from "react-router-dom";

// axios请求
// redux - saga module hooks

const Home = lazy(() => import("./pages/home/index"));
const Detail = lazy(() => import("./pages/detail/index"));
const City = lazy(() => import("./pages/city/index"));
const NotFound = lazy(() => import("./pages/notFound/index"));

const Movies = lazy(() => import("./pages/home/movies/index"));
const Video = lazy(() => import("./pages/home/video/index"));
const Mini = lazy(() => import("./pages/home/mini/index"));
const Show = lazy(() => import("./pages/home/show/index"));
const Mine = lazy(() => import("./pages/home/mine/index"));

const App = () => {
  return (
    <Suspense fallback={<div>loading...</div>}>
      <Routes>
        <Route path="/" element={<Navigate to="/home"></Navigate>}></Route>
        <Route path="/home" element={<Home />}>
          <Route path="movies" element={<Movies />}></Route>
          <Route path="video" element={<Video />}></Route>
          <Route path="mini" element={<Mini />}></Route>
          <Route path="show" element={<Show />}></Route>
          <Route path="mine" element={<Mine />}></Route>
        </Route>
        <Route path="/detail" element={<Detail />}></Route>
        <Route path="/city" element={<City />}></Route>
        <Route path="*" element={<NotFound />}></Route>
      </Routes>
    </Suspense>
  );
};

export default App;
